<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>角色管理</title>
        <% include("/common/common_css_js.html"){} %>
        <style type="text/css">
            .width100{
                width: 100%;
            }

            .width50{
                width: 50%;
            }

            .height100{
                height: 100%;
            }
        </style>
    </head>
    <body>

        <div class = "mini-fit" style="display: flex;flex-direction: row">
            <div class="width50 height100" style="padding:2px">
                <div id="queryForm" class="uc-toolbaroverflow width100" _borderStyle="border-top:0;" style="margin-bottom: 5px;padding-left: 5px;height: 30px;">
                    <span>角色名称：</span>
                    <input id="keyRoleName" name="keyRoleName" class="mini-textbox" style="width:250px" emptyText="角色名称" required="false" requiredErrorText="角色名称不能为空"/>
                    <a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
                    <span class="separator"></span>
                    <a class="mini-button" iconCls="icon-add" onclick="showAddRole('add')">新增</a>
                    <a class="mini-button" iconCls="icon-edit" onclick="showEditRole('edit')">编辑</a>
                </div>
                <div class = "mini-fit">
                    <div id="datagrid1" class="mini-datagrid"
                         style="width: 100%; height: 100%;"
                         url="${base}/pages/system_maintain/role/queryRoleList" idField="id"
                         showPager="true" pageSize="20" sizeList="[10,20,30,50,100]"
                         allowResize="true"
                         allowCellWrap="true"
                         multiSelect = "false"
                         onrowclick="dataGrid1RowClick"
                        >
                        <div property="columns">
                            <div type="checkcolumn" ></div>
                            <div field="name" width="70" headerAlign="center" align="left" allowSort="true">角色名称</div>
                            <div field="comment" width="140" headerAlign="center" align="left" allowSort="true">角色说明</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="width50 height100" style="padding:2px">
                <div class="uc-toolbaroverflow" _borderStyle="border-top:0;" style="margin-bottom: 5px;padding-left: 5px;height: 30px;padding-top: 5px">
                    <span id="selectRoleName" style="color: red"></span>
                    <span>角色用户列表：</span>
                    <a class="mini-button" iconCls="icon-add" onclick="addRoleUser()">添加角色用户</a>
                    <a class="mini-button" iconCls="icon-remove" onclick="removeRoleUser()">删除角色用户</a>
                    <input id="selectRoleId" name="keyRoleName" class="mini-hidden"/>
                </div>

                <div class = "mini-fit">
                    <div id="datagrid2" class="mini-datagrid"
                         style="width: 100%; height: 100%;"
                         url="${base}/pages/system_maintain/user_role/queryUserListByRoleId" idField="id"
                         showPager="true" pageSize="20" sizeList="[10,20,30,50,100]"
                         allowResize="true"
                         allowCellWrap="true"
                         multiSelect = "true">
                        <div property="columns">
                            <div type="checkcolumn" ></div>
                            <div field="name" width="70" headerAlign="center" align="left" allowSort="true">姓名</div>
                            <div field="mobile" width="70" headerAlign="center" align="left" allowSort="true">手机号</div>
                            <div field="gender_id" width="50" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">性别</div>
                            <div field="department_id" width="70" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"department"}' renderer="commonRender">归属部门</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 添加或编辑角色面板 -->
        <div id="rolePanel" class="mini-window" title="角色管理" style="width:600px;height:300px;"
             showMaxButton="true" showCollapseButton="false" showMinButton="true" showShadow="true"
             showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
            <div property="footer" style="padding:10px;text-align: right">
                <a  class="mini-button" iconCls="icon-save" onclick="saveRole()">保存</a>
                <a  class="mini-button" iconCls="icon-close" onclick="closePanel('rolePanel')">关闭</a>
            </div>

            <div id="roleForm">
                <input id="opType" name="opType"  class="mini-hidden" required="true"  requiredErrorText="姓名不能为空" readonly="readonly"/>
                <span>角色ID:</span>
                <input id="id" name="id"  class="mini-textbox" required="true"  requiredErrorText="角色ID不能为空" readonly="readonly"/>
                <span style="color: red">添加时角色ID不用填写</span>
                <div style="margin-top: 5px"></div>
                <span>角色名称:</span><input id="name" name="name"  class="mini-textbox" required="true"  requiredErrorText="角色名称不能为空" onvaluechanged="nameChanged"/>
                <div style="margin-top: 5px"></div>
                <span>角色说明:</span><input id="comment"  name="comment" style="width:90%;height:100px;text-align: left;" class="mini-textarea"   emptyText="请输入备注信息" />
            </div>
        </div>


        <!--  用户角色添加面板 -->
        <div id="roleUserAddPanel" class="mini-window" title="角色用户添加" style="width:1000px;height:600px;"
             showMaxButton="true" showCollapseButton="false" showMinButton="true" showShadow="true"
             showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
            <div property="footer" style="padding:10px;text-align: right">
                <a  class="mini-button" iconCls="icon-save" onclick="saveRoleUser()">保存</a>
                <a  class="mini-button" iconCls="icon-close" onclick="closePanel('roleUserAddPanel')">关闭</a>
            </div>

            <div class="mini-fit" style="display: flex;flex-direction: row">
                <div style="width: 45%; height: 100%;">
                    <div id="addRoleUserForm" style="height: 6%">
                        <span>待选择用户</span>
                        <input id="keyUserName" name="keyUserName" class="mini-textbox" style="width:250px" emptyText="姓名、电话" required="false" requiredErrorText="角色名称不能为空"/>
                        <a class="mini-button" iconCls="icon-search" onclick="searchRoleUser()">查询</a>
                    </div>
                    <div id="datagrid3" class="mini-datagrid"
                         style="width: 100%; height: 94%;"
                         url="${base}/pages/system_maintain/user_role/queryUnselectedRoleUser" idField="id"
                         showPager="true" pageSize="10" sizeList="[10,20,30,50,100]"
                         allowResize="true"
                         allowCellWrap="true"
                         multiSelect = "true">
                        <div property="columns">
                            <div type="checkcolumn" ></div>
                            <div field="name" width="70" headerAlign="center" align="left" allowSort="true">姓名</div>
                            <div field="mobile" width="70" headerAlign="center" align="left" allowSort="true">手机号</div>
                            <div field="gender_id" width="50" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">性别</div>
                            <div field="department_id" width="70" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"department"}' renderer="commonRender">归属部门</div>
                        </div>
                    </div>
                </div>

                <div style="width: 10%; height: 100%; margin-left: 5px;margin-right: 5px;display: flex;flex-direction: column;justify-content: center;align-items: center">
                    <a  class="mini-button"  onclick="addToRight()">>></a>
                    <div style="margin-top: 20px;margin-bottom: 20px"></div>
                    <a  class="mini-button"  onclick="removeFromRight()"><<</a>
                </div>

                <div style="width: 45%; height: 100%;">
                    <div style="height: 6%">
                        <span>已选用户列表</span>
                    </div>
                    <div id="datagrid4" class="mini-datagrid"
                         style="width: 100%; height: 94%;"
                         url="${base}/pages/system_maintain/user_role/querySelectedRoleUser" idField="id"
                         showPager="true" pageSize="10" sizeList="[10,20,30,50,100]"
                         allowResize="true"
                         allowCellWrap="true"
                         multiSelect = "true">
                        <div property="columns">
                            <div type="checkcolumn" ></div>
                            <div field="name" width="70" headerAlign="center" align="left" allowSort="true">姓名</div>
                            <div field="mobile" width="70" headerAlign="center" align="left" allowSort="true">手机号</div>
                            <div field="gender_id" width="50" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">性别</div>
                            <div field="department_id" width="70" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"department"}' renderer="commonRender">归属部门</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>





        <script type="text/javascript">
            mini.parse();

            let queryForm = new mini.Form("#queryForm");
            let roleForm = new mini.Form("#roleForm");
            let addRoleUserForm = new mini.Form("#addRoleUserForm");

            let keyRoleName = mini.get("keyRoleName");

            let grid1 = mini.get("datagrid1");
            let grid2 = mini.get("datagrid2");
            let grid3 = mini.get("datagrid3");
            let grid4 = mini.get("datagrid4");

            let opType = mini.get("opType");


            $(function () {
                // 加载列表数据
                grid1.load();
            });

            /**
             * 根据条件查找
             */
            function search() {
                let queryFormData = queryForm.getData(true);
                grid1.load(queryFormData);
            }

            /**
             * 点击添加按钮时显示面板
             */
            function showAddRole(opTypeValue) {
                opType.setValue(opTypeValue);
                mini.get("id").set({required:false,enabled:false});
                mini.get("id").setValue("");
                mini.get("name").setValue("");
                mini.get("comment").setValue("");
                public_showModelAtPos("rolePanel", "center", "middle");
            }

            /**
             * 点击编辑时显示编辑角色面板
             */
            function showEditRole(opTypeValue) {
                // 1. 获取对象
                roleForm.clear();
                // 获取当前选中的行
                let row = grid1.getSelected();

                if(!row){
                    mini.alert("请选择要编辑的行!","角色编辑",null);
                    return;
                }

                roleForm.setData(row);

                opType.setValue(opTypeValue);
                mini.get("id").set({required:false,enabled:false});

                public_showModelAtPos("rolePanel", "center", "middle");
            }

            /**
             * 根据名称检测是否有重复
             * @param e
             */
            function nameChanged(e) {
                if(opType.getValue()=="add"){
                    let nameValue = e.value;
                    let ret = public_getServerData("${base}/pages/system_maintain/role/checkNameUnique?name=" + nameValue)
                    if(!ret.ok){
                        showAlert(ret.message);
                    }
                }
            }

            /**
             * 保存角色
             */
            function saveRole() {

                roleForm.validate();
                if (roleForm.isValid() == false) return;

                let saveUrl = "${base}/pages/system_maintain/role";
                if(opType.getValue()=="add"){
                    saveUrl += "/addRole";
                }
                else{
                    saveUrl += "/updateRole";
                }

                let roleData = roleForm.getData(true);

                mini.confirm("确定要保存角色?", "角色提示",
                    function (action) {
                        if (action == "ok") {
                            let ret = public_getServerData(saveUrl,roleData);
                            showAlert(ret.message,function () {
                                if(ret.ok){
                                    search();
                                    closePanel('rolePanel');
                                }
                            });
                        }
                    }
                );
            }


            /**
             * 关闭面板
             * @param winId
             */
            function closePanel(winId) {
                public_onCancel(winId);
            }

            /**
             * 角色表点击事件
             * @param e
             */
            function dataGrid1RowClick(e) {
                let selectItem = e.record;
                let roleIdValue = selectItem.id;
                let roleNameValue = selectItem.name;
                $("#selectRoleName").text(roleNameValue);
                mini.get("selectRoleId").setValue(roleIdValue);
                // 根据选择的ID加载相应数据
                // roleId
                grid2.load({roleId:roleIdValue});
            }

            /**
             * 添加角色用户
             * @param roleId
             */
            function addRoleUser(){
                let roleIdValue = mini.get("selectRoleId").getValue();

                if(public_isEmpty(roleIdValue)){
                    showAlert("请选择角色再添加用户!");
                    return;
                }

                grid3.load({roleId:roleIdValue});
                grid4.clearRows();

                public_showModelAtPos("roleUserAddPanel", "center", "middle");
                // queryUnselectedRoleUser querySelectedRoleUser
            }

            /**
             * 根据条件查询相应的用户
             */
            function searchRoleUser(){
                // 当前角色条件
                let roleIdValue = mini.get("selectRoleId").getValue();
                // 还要排除已经选择的用户条件
                let excludeUserArray = grid4.data;

                // 把需要排除的用户构建出来
                let excludeUserIdsValue="";
                for(let excludeUserObj of excludeUserArray){
                    excludeUserIdsValue += "'" + excludeUserObj.id + "',";
                }
                if(excludeUserIdsValue.length>0){
                    excludeUserIdsValue = excludeUserIdsValue.substring(0,excludeUserIdsValue.length-1);
                }
                // 检索条件
                let keyUserNameValue = mini.get("keyUserName").getValue();
                // 加载 grid3
                loadGrid3(roleIdValue,excludeUserIdsValue,keyUserNameValue);
            }

            function loadGrid3(roleIdValue,excludeUserIdsValue,keyUserNameValue){
                // 根据三个条件进行加载
                grid3.load({roleId:roleIdValue,excludeUserIds:excludeUserIdsValue,keyUserName:keyUserNameValue})
            }

            function loadGrid4(roleIdValue,includeUserIdsValue){
                grid4.load({roleId:roleIdValue,includeUserIds:includeUserIdsValue});
            }

            /**
             * 添加到右边
             */
            function addToRight(){
                // 当前角色条件
                let roleIdValue = mini.get("selectRoleId").getValue();
                let includeUserArray = grid3.getSelecteds();
                if(includeUserArray.length==0){
                    showAlert("请选择需要添加到右边列表中的对象!");
                    return;
                }
                let includeUserIdsValue = "";
                for(let obj of includeUserArray){
                    includeUserIdsValue += "'" + obj.id + "',";
                }
                let rightSelectedArray = grid4.data;
                for(let obj of rightSelectedArray){
                    includeUserIdsValue += "'" + obj.id + "',"
                }

                if(includeUserIdsValue.length>0){
                    includeUserIdsValue = includeUserIdsValue.substring(0,includeUserIdsValue.length-1);
                }

                // 检索条件
                let keyUserNameValue = mini.get("keyUserName").getValue();

                loadGrid4(roleIdValue,includeUserIdsValue);
                loadGrid3(roleIdValue,includeUserIdsValue,keyUserNameValue);
            }

            /**
             * 从右边移除
             */
            function removeFromRight(){
                let roleIdValue = mini.get("selectRoleId").getValue();
                // grid4中选择的对象
                let includeUserArray = grid4.getSelecteds();
                // grid4中的全部对象
                let allUserArray = grid4.data;
                let includeUserIdsValue="";
                for(let obj1 of allUserArray){
                    let flag = true;
                    for(let obj2 of includeUserArray){
                        if(obj1.id==obj2.id){
                            flag=false;
                            break;
                        }
                    }
                    if(flag){
                        includeUserIdsValue += "'" + obj1.id + "',";
                    }
                }

                if(includeUserIdsValue.length>0){
                    includeUserIdsValue = includeUserIdsValue.substring(0,includeUserIdsValue.length-1);
                }

                // 检索条件
                let keyUserNameValue = mini.get("keyUserName").getValue();
                loadGrid4(roleIdValue,includeUserIdsValue);
                loadGrid3(roleIdValue,includeUserIdsValue,keyUserNameValue);
            }

            /**
             * 保存角色用户
             */
            function saveRoleUser(){
                let roleIdValue = mini.get("selectRoleId").getValue();
                let allRoleUserArray = grid4.data;
                if(allRoleUserArray.length<=0){
                    showAlert("没有选择角色用户!");
                    return;
                }

                let roleUserIdsArray = [];
                for(let userObj of allRoleUserArray){
                    roleUserIdsArray.push(userObj.id);
                }


                // 给出确认提示框
                mini.confirm("确定要保存用户到指定角色?", "用户角色提示",
                    function (action) {
                        if (action == "ok") {
                            let ret = public_getServerData("${base}/pages/system_maintain/user_role/saveRoleUser",{roleId:roleIdValue,roleUserIds:roleUserIdsArray});
                            showAlert(ret.message,function (){
                                if(ret.ok){
                                    // 重新加载一下 grid2
                                    grid2.load({roleId:roleIdValue});
                                    // 关闭面板
                                    closePanel('roleUserAddPanel');
                                }
                            });
                        }
                    }
                );
            }

            /**
             * 移除提定角色用户
             */
            function removeRoleUser(){
                let roleIdValue = mini.get("selectRoleId").getValue();
                if(public_isEmpty(roleIdValue)){
                    showAlert("没有选择相应的角色，不能进行删除角色用户操作!");
                    return;
                }
                // 从 Grid2中获取保存对应的用户信息
                let deleteUserArray = grid2.getSelecteds();
                if(deleteUserArray.length<=0){
                    showAlert("请选择需要退出相应角色的用户!");
                    return;
                }

                let deleteUserIdsValue = [];
                for(let userObj of deleteUserArray){
                    deleteUserIdsValue.push(userObj.id);
                }

                // 给出确认提示框
                mini.confirm("确定要删除选择用户的角色?", "用户角色提示",
                    function (action) {
                        if (action == "ok") {
                            let ret = public_getServerData("${base}/pages/system_maintain/user_role/deleteRoleUser",{roleId:roleIdValue,roleUserIds:deleteUserIdsValue});
                            showAlert(ret.message,function (){
                                if(ret.ok){
                                    // 重新加载一下 grid2
                                    grid2.load({roleId:roleIdValue});
                                }
                            });
                        }
                    }
                );

            }

        </script>
    </body>
</html>